<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <!-- 需要被填充的区域 -->
      <router-view></router-view>
    </div>
  </body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-router/dist/vue-router.js"></script>
<script>
  // 1. 定义（路由）组件。
  const Home = {
    template: '<div>首页</div>'
  }
  const News = {
    template: '<div>新闻</div>'
  }

  // 2. 定义路由规则对象（每个路由应该映射一个组件）
  const routes = [
    {
      path: '/home',
      component: Home
    },
    {
      path: '/news',
      component: News
    }
  ]
  // 3. 创建 router 实例，然后传 `routes` 配置
  const router = new VueRouter({
    //如果路由规则对象名也为routes，那么就可以简写为 routes
    routes: routes
  })

  var vm = new Vue({
    el: '#app',
    data: {},
    // 将路由添加到Vue中
    router
  })
</script>
